<template>
	<view class="social-img-box">
		<image class="social-img" :src="imgList[0]" mode="aspectFill"></image>
	</view>
</template>

<script>
	export default {
		name: "socialImgView",
		data() {
			return {
				imgList: []
			};
		},
		props: {
			imgs: {
				type: String
			}
		},
		watch: {
			imgs: {
				handler: function(val) {
					if (val) {
						this.imgList = val.split(',');
					}
				},
				immediate: true,
				deep: true
			}
		}
	}
</script>

<style lang="scss">
	.social-img-box {
		width: 100%;
		margin-top: 32rpx;
		
		.social-img {
			width: 100%;
			height: 400rpx;
			border-radius: 28rpx;
		}
	}
</style>
